<template>
  <div>
    <div class='container'>
      <el-dialog
        :title="text+'文章'"
        :visible="articleFormDialogVisible"
        width="50%"
        @close="onClose"
      >
        <!-- 表单 -->
        <el-form
          ref="dataForm"
          :rules="ruleInline"
          :model="articleForm"
          label-width="80px"
        >
          <!-- 标题区域 -->
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="articleForm.title"></el-input>
          </el-form-item>
          <!-- 富文本框 -->
          <el-form-item label="文章内容" prop="articleBody">
            <!-- <quill-editor v-model="articleForm.articleBody">
            </quill-editor> -->
            <quill-editor
              v-model="articleForm.articleBody"
              ref="myQuillEditor"
              :options="editorOption"
            >
              <div class="one" v-highlight></div>
            </quill-editor>
          </el-form-item>
          <!-- 视频地址 -->
          <el-form-item label="视频地址">
            <el-input v-model="articleForm.videoURL"></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="onClose">取 消</el-button>
          <el-button type="primary" @click="onSave">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/articles.js'
// import toolbarOptions from '@/module-hmmm/toolbarOptions.js'
export default {
  props: {
    text: {
      type: String,
      required: true
    },
    articleFormDialogVisible: {
      type: Boolean,
      required: true
    },
    articleForm: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 表单验证
      ruleInline: {
        title: [
          { required: true, message: '文章标题不能为空', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '文章内容不能为空', trigger: 'blur' }
        ]
      },
      // 富文本配置项
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            ['blockquote', 'code-block']
          ]
        }
      }
    }
  },

  created () {

  },

  methods: {
    // 关闭弹层事件
    onClose () {
      this.$emit('on-close')
    },
    // 点击确定 表单提交
    onSave () {
      // console.log(11111)
      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          const data = {
            ...this.articleForm
          }
          if (this.articleForm.id) {
            // console.log('111111111', '编辑')
            await update(data)
            this.$message.success('编辑成功')
          } else {
            // console.log('2222222222', '添加')
            await add(this.articleForm)
            this.$message.success('创建成功')
          }
          this.$emit('on-close') // 触发关闭弹层,一定要在发送请求之后
          this.$emit('load-article-list') // 重新加载页面
          this.$refs.dataForm.resetFields() // 清空表单校验
        } else {
          this.$message.error('*号为必填项!')
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
/deep/.ql-container {
  height:250px !important;
  overflow-y:auto; // 按需出现滚动条
}
</style>
